<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <title>生意帮</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/common.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui-pull-refresh.css" />
    <link rel="stylesheet" type="text/css" href="../../css/swiper.min.css">
    <link rel="stylesheet" type="text/css" href="../../css/aui-slide.css" />
    <style>
        html,
        body {
            background-color: transparent;
        }
        .boxB {
          position: relative;;
          width: 100%;
          height: 100vh;
        }
        .mask {
          position: absolute;
          width: 100%;
          height: 100%;
          background-color: rgba(0,0,0,0.3);
        }
        .box {
            padding: 0.7rem 0.5rem 0;
            background-color: #fff;
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
        }

        .aui-content {
            padding-bottom: 0.7rem;
            border-bottom: 1px solid #e6e6e6;
        }

        .head_right .aui-pull-right {
            border: 1px solid #999;
            border-radius: 50%;
            height: 1rem;
            width: 1rem;
            text-align: center;
            line-height: 1rem;
        }

        .aui-iconfont {
            font-size: 0.6rem;
            vertical-align: top;
        }

        .head_right {
            position: relative;
        }

        .price {
            color: #f23030;
            font-size: 0.8rem;
            margin-bottom: 0.25rem;
        }

        .repertory {
            margin-bottom: 0.25rem;
            font-size: 0.7rem;
            color: #333;
        }

        .xuanz {
            font-size: 0.7rem;
            color: #333;
        }

        .xuanz span {
            margin-left: 0.25rem;
        }

        .xuanz span:after {
            content: '”';
        }

        .xuanz span:before {
            content: '“';
        }

        .cp_txt {
            position: absolute;
            left: 0.5rem;
            bottom: 0;
            line-height: 0.8rem;
        }

        .title {
            padding: 0.7rem 0 0.5rem;
            font-size: 0.8rem;
            line-height: 0.8rem;
        }

        .ys_xuanx,
        .cm_xuanx {
            padding-bottom: 0.7rem;
            border-bottom: 1px solid #e6e6e6;
        }

        .clearfix:after {
            content: '';
            display: block;
            clear: both;
        }

        .ys_xuanx ul li,
        .cm_xuanx ul li {
            /*width: 18%;*/
            /*float: left;*/
            display: inline-block;
            padding: 0 0.4rem;
            margin-right: 2.5%;
            height: 1.5rem;
            line-height: 1.5rem;
            border-radius: 0.8rem;
            background-color: #f5f5f5;
            color: #4d4d4d;
            font-size: 0.6rem;
            text-align: center;
        }

        .ys_xuanx ul li:last-of-type,
        .cm_xuanx ul li:last-of-type {
            margin-right: 0;
        }

        .ys_xuanx .active,
        .cm_xuanx .active {
            background-color: #f23030;
            color: #fff;
        }

        .goumai>div {
            border-color: #fff;
            background-color: #f5f5f5;
        }

        .Submit {
            color: #fff;
            text-align: center;
            height: 2rem;
            line-height: 2rem;
            font-size: 0.7rem;
            background-color: #f23030;
            border-radius: 1rem;
            margin-bottom: 0.7rem;
        }
        .head_img{
          background:url(../../image/cpimg.jpg) center center/cover no-repeat;
        }
        .aui-bar-btn-sm .aui-bar-btn-item{
          line-height: 1.2rem;
          padding: 0 0.2rem;
        }
        .goumai>div{
          margin-left:4px;
          margin-right: 5px;
        }

                .goumai>div.countNum {
                    width: 100%;
                    float: right;
                    margin-left: 2rem;
                    background: #fff;
                }

                .countNum input[type="number"] {
                    width: 1.2rem;
                    height: 1.2rem;
                    border: 1px solid #cccccc;
                    text-align: center;
                    float: left;
                    font-size: 0.6rem;
                        border-left: none;
                        border-right: none;
                }

                .countNum input[type="button"] {
                    padding: 0 0.5rem;
                    height: 1.2rem;
                    border: 1px solid #cccccc;
                    text-align: center;
                    float: left;
                    font-size: 0.6rem;
                }

                .countNum input[disabled] {
                    color: #ccc;
                }
    </style>
</head>

<body>
  <div id="app" v-cloak>
    <div class="boxB">
      <div class="mask" onclick="openF()"></div>
        <div class="box">
            <div class="aui-content">
                <div class="aui-row">
                    <div class="aui-col-xs-4 head_left">
                        <div class="head_img" v-if="goods_ps_cont.pic=='' || goods_ps_cont.pic==null || goods_ps_cont.price=='' || goods_ps_cont.price==null"></div>
                        <div class="head_img" :style="{backgroundImage:'url(' + goods_ps_cont.pic + ')'}" v-else></div>
                    </div>
                    <div class="aui-col-xs-8 head_right">
                        <a class="aui-pull-right" onclick="openF()">
                            <span class="aui-iconfont aui-icon-close"></span>
                        </a>

                        <div class="cp_txt">
                            <div class="price"  v-if="goods_ps_cont.price && goods_ps_cont.price != '' && !isZp">
                              <i style="font-style:normal" v-if="area_type == 1">￥{{goods_ps_cont.price*num}}</i>
                              <i style="font-style:normal" v-else-if="area_type == 0">{{goods_ps_cont.price*num}}兑换币</i>
                            </div>
                            <div class="repertory" v-if="goods_ps_cont.pic=='' || goods_ps_cont.pic==null || goods_ps_cont.price=='' || goods_ps_cont.price==null">库存{{goods_ps_cont.store}}件</div>
                            <div class="repertory">库存{{goods_ps_cont.store}}件</div>
                            <div class="xuanz" v-if="goods_ps_cont.pic=='' || goods_ps_cont.pic==null || goods_ps_cont.price=='' || goods_ps_cont.price==null">已选 :<span>{{goods_ps_cont.sku_info}}</span></div>
                            <div class="xuanz" v-else>已选 :<span>{{goods_ps_cont.sku_info}}</span></div>
                        </div>
                    </div>
                </div>
            </div>
            <div v-for="items1 in info">
              <div class="title">
                  {{items1.skuName}}
              </div>
              <div class="ys_xuanx clearfix">
                  <ul>
                      <li v-for="items2 in items1.data" :data-pid="items2.sku_id">{{items2.name}}</li>
                      <!-- <li>米蓝色</li>
                      <li>卡其色</li>
                      <li>黑色</li>
                      <li>白色</li> -->
                  </ul>
              </div>
            </div>

            <!-- <div class="title">
                尺码
            </div>
            <div class="cm_xuanx clearfix">
                <ul>
                    <li class="active">S</li>
                    <li>M</li>
                    <li>L</li>
                    <li>XL</li>
                </ul>
            </div> -->
            <div class="title" style="line-height:1.3rem;" v-if="!isZp">
                购买数量
                <div class="goumai aui-bar aui-bar-btn aui-bar-btn-sm" style="width:30%;float:right">
                    <div class="countNum clearfix">
                        <input type="button" value='-'  @click="numDel()" :disabled="num <= 1 ? 'disabled' : false"  />
                        <input type="number" size='3' readonly v-model='num' />
                        <input type="button" value='+' @click="numAdd()"/>
                    </div>
                </div>
            </div>
            <div class="Submit">
                确定
            </div>
        </div>
    </div>
  </div>

</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/zepto.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript" src="../../script/utils.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/aui-tab.js"></script>
<script type="text/javascript" src="../../script/aui-scroll.js"></script>
<script type="text/javascript" src="../../script/aui-pull-refresh.js"></script>
<script type="text/javascript" src="../../script/swiper.min.js"></script>
<script type="text/javascript" src="../../script/aui-slide.js"></script>
<script type="text/javascript" src="../../script/aui-lazyload.js"></script>
<script type="text/javascript">
    function openF() {
        api.closeFrame({
            name: 'purchase'
        });
    }

    apiready = function() {


      api.parseTapmode();
      var type = api.pageParam.type;
      var id = api.pageParam.id;

      var app = new Vue({
        el: '#app',
        data: {
          info: [],
          goods_ps: [],
          goods_ps1: [],
          goods_ps_cont:[],
          num:1,
          exchangeids: '',
          goodsSkuId: '',
          exchangegoodsSkuId:'',
          exchangegoodsNames:'',
          area_type: 1,
          isZp: false
        },
        created: function() {
          var $_this = this;
          $_this.isZp = type == 3 ? true : false
          $_this.area_type = api.pageParam.area_type || 1
          console.log(JSON.stringify(api.pageParam.data));
          if(api.pageParam.data){
            $_this.exchangeids = api.pageParam.data.exchangeOkId;
            $_this.exchangegoodsSkuId = api.pageParam.data.exchangeOkSkyId;
          }else{
            $_this.exchangeids = '';
            $_this.exchangegoodsSkuId = '';
          }
          $_this.exchangegoodsNames=api.pageParam.exchangeName;
          // $_this.console = api.pageParam.data.exchangeOkId || null;
          api.showProgress({
              title: '努力加载中...',
              text: '先喝杯茶...',
              modal: false
          });
          if (type == 1) {
            api.ajax({
              url: window.Url.Freegoods_getGoodsSku,
              method: 'post',
              data: {
                values: {
                  goodsId: api.pageParam.id,
                  token: $api.getStorage('token')
                }
              }
            }, function(ret, err) {
                if (ret) {
                    $_this.info = ret.data.sku;
                    $_this.goods_ps = ret.data.sku_attr;
                    $_this.goods_ps1 = $_this.goods_ps[0];
                    console.log(JSON.stringify(ret))
                    $_this.$nextTick(function () {

                      $('.head_img').height($('.head_img').width());
                      $('.head_right').height($('.head_left').height());
                      $('.Submit').click(function(){
                          $_this.goSubmit(1);
                      });
                      for (var key in ret.data.sku_attr) {
                        $_this.goods_ps_cont = $_this.goods_ps[key]
                        var arr = key.slice(1, -1).split('-')
                        for(var i = 0; i <= arr.length; i++) {
                            $('.ys_xuanx ul li[data-pid="'+ arr[i] +'"]').addClass('active');
                        }
                        break
                      }
                      if($_this.goods_ps_cont.sku_id){
                        $_this.goodsSkuId=  $_this.goods_ps_cont.sku_id;
                      }
                      $('.ys_xuanx ul li').click(function () {
                            $(this).parent().find('li').removeClass('active');
                            $(this).addClass('active');

                            var objSel=document.getElementsByClassName("active");
                            //    console.log(objSel);
                            var arr1=[];
                            for(var i=0;i<objSel.length;i++){
                                // console.log(1);
                                // console.log($(objSel[k]));
                                    var str=$(objSel[i]).data("pid");
                                    // console.log(str);
                                    arr1.push(str);
                                    // console.log(arr1)
                                }
                                var t = '-';
                                arr1.map((r)=>{
                                    t += r + '-';
                                })
                                var tid = t;

                                // console.log(tid);
                                // console.log($_this.goods_ps);
                                for(let j in $_this.goods_ps){
                                    if(j == tid){
                                        // console.log(j);

                                        $_this.goods_ps_cont = $_this.goods_ps[j]
                                    }
                                }
                                // console.log(JSON.stringify($_this.goods_ps_cont));
                                if($_this.goods_ps_cont.sku_id){
                                  $_this.goodsSkuId=  $_this.goods_ps_cont.sku_id;
                                }

                        })

                    })
                } else {
                    api.alert({ msg: JSON.stringify(err) });
                }
            })
          } else if (type == 2) {
            api.ajax({
              url: window.Url.Freegoods_getGoodsSku,
              method: 'post',
              data: {
                values: {
                  goodsId: api.pageParam.id,
                  token: $api.getStorage('token')
                }
              }
            }, function(ret, err) {
                if (ret) {
                  console.log(JSON.stringify(ret))
                    $_this.info = ret.data.sku;
                    $_this.goods_ps = ret.data.sku_attr;
                    $_this.goods_ps1 = $_this.goods_ps[0];
                    // console.log(JSON.stringify(ret))
                    $_this.$nextTick(function () {

                      $('.head_img').height($('.head_img').width());
                      $('.head_right').height($('.head_left').height());
                      $('.Submit').click(function(){
                          $_this.goSubmit(2);
                      });

                      for (var key in ret.data.sku_attr) {
                        $_this.goods_ps_cont = $_this.goods_ps[key]
                        var arr = key.slice(1, -1).split('-')
                        for(var i = 0; i <= arr.length; i++) {
                            $('.ys_xuanx ul li[data-pid="'+ arr[i] +'"]').addClass('active');
                        }
                        break
                      }
                      if($_this.goods_ps_cont.sku_id){
                        $_this.goodsSkuId=  $_this.goods_ps_cont.sku_id;
                      }

                      for (var key in ret.data.sku_attr) {
                        $_this.goods_ps_cont = $_this.goods_ps[key]
                        var arr = key.slice(1, -1).split('-')
                        for(var i = 0; i <= arr.length; i++) {
                            $('.ys_xuanx ul li[data-pid="'+ arr[i] +'"]').addClass('active');
                        }
                        break
                      }
                      $('.ys_xuanx ul li').click(function () {
                            $(this).parent().find('li').removeClass('active');
                            $(this).addClass('active');

                            var objSel=document.getElementsByClassName("active");
                            //    console.log(objSel);
                            var arr1=[];
                            for(var i=0;i<objSel.length;i++){
                                // console.log(1);
                                // console.log($(objSel[k]));
                                    var str=$(objSel[i]).data("pid");
                                    // console.log(str);
                                    arr1.push(str);
                                    // console.log(arr1)
                                }
                                var t = '-';
                                arr1.map((r)=>{
                                    t += r + '-';
                                })
                                var tid = t;

                                // console.log(tid);
                                // console.log($_this.goods_ps);
                                for(let j in $_this.goods_ps){
                                    if(j == tid){
                                        // console.log(j);
                                        // console.log($this.goods_ps[j]);
                                        $_this.goods_ps_cont = $_this.goods_ps[j]
                                    }
                                }
                                if($_this.goods_ps_cont.sku_id){
                                  $_this.goodsSkuId=  $_this.goods_ps_cont.sku_id;
                                }
                        })

                    })
                }else{
                    api.alert({ msg: JSON.stringify(err) });
                }
            })
          }else if (type == 3) {
            api.ajax({
              url: window.Url.Freegoods_getGoodsSku,
              method: 'post',
              data: {
                values: {
                  goodsId: api.pageParam.exchangeId,
                  token: $api.getStorage('token')
                }
              }
            }, function(ret, err) {
                if (ret) {
                    $_this.info = ret.data.sku;
                    $_this.exchangeids = api.pageParam.exchangeId,
                    $_this.goods_ps = ret.data.sku_attr;
                    $_this.goods_ps1 = $_this.goods_ps[0];
                    // console.log(JSON.stringify(ret))
                    $_this.$nextTick(function () {

                      $('.head_img').height($('.head_img').width());
                      $('.head_right').height($('.head_left').height());
                      $('.Submit').click(function(){
                          $_this.goSubmit(3);
                      });
                      for (var key in ret.data.sku_attr) {
                        $_this.goods_ps_cont = $_this.goods_ps[key]
                        var arr = key.slice(1, -1).split('-')
                        for(var i = 0; i <= arr.length; i++) {
                            $('.ys_xuanx ul li[data-pid="'+ arr[i] +'"]').addClass('active');
                        }
                        break
                      }
                      $('.ys_xuanx ul li').click(function () {
                            $(this).parent().find('li').removeClass('active');
                            $(this).addClass('active');

                            var objSel=document.getElementsByClassName("active");
                            //    console.log(objSel);
                            var arr1=[];
                            for(var i=0;i<objSel.length;i++){
                                // console.log(1);
                                // console.log($(objSel[k]));
                                    var str=$(objSel[i]).data("pid");
                                    // console.log(str);
                                    arr1.push(str);
                                    // console.log(arr1)
                                }
                                var t = '-';
                                arr1.map((r)=>{
                                    t += r + '-';
                                })
                                var tid = t;

                                // console.log(tid);
                                // console.log($_this.goods_ps);
                                for(let j in $_this.goods_ps){
                                    if(j == tid){
                                        // console.log(j);
                                        // console.log($this.goods_ps[j]);
                                        $_this.goods_ps_cont = $_this.goods_ps[j]
                                    }
                                }
                                if($_this.goods_ps_cont.sku_id){
                                  $_this.exchangegoodsSkuId=  $_this.goods_ps_cont.sku_id;
                                }
                                console.log(JSON.stringify($_this.exchangegoodsSkuId))
                        })

                    })
                } else {
                    api.alert({ msg: JSON.stringify(err) });
                }
            })
          } else if (type == 4) {
            api.ajax({
              url: window.Url.Freegoods_getGoodsSku,
              method: 'post',
              data: {
                values: {
                  goodsId: api.pageParam.info.goods_id,
                  token: $api.getStorage('token')
                }
              }
            }, function(ret, err) {
                if (ret) {
                  // console.log(JSON.stringify(ret.data))
                  // console.log(JSON.stringify(api.pageParam.info))
                    $_this.info = ret.data.sku;
                    $_this.goods_ps = ret.data.sku_attr;
                    $_this.goods_ps1 = $_this.goods_ps[0];
                    $_this.num = api.pageParam.info.num
                    // console.log(JSON.stringify(ret))
                    $_this.$nextTick(function () {

                      $('.head_img').height($('.head_img').width());
                      $('.head_right').height($('.head_left').height());
                      $('.Submit').click(function(){
                          $_this.goSubmit(4, $_this.goods_ps_cont);
                      });

                      for (var key in ret.data.sku_attr) {
                        if (ret.data.sku_attr[key].sku_id == api.pageParam.info.sku_id) {
                          var arr = key.slice(1, -1).split('-')
                          for(var i = 0; i <= arr.length; i++) {
                              $('.ys_xuanx ul li[data-pid="'+ arr[i] +'"]').addClass('active');
                          }
                          $_this.goods_ps_cont = $_this.goods_ps[key]
                        }
                      }

                      $('.ys_xuanx ul li').click(function () {
                            $(this).parent().find('li').removeClass('active');
                            $(this).addClass('active');

                            var objSel=document.getElementsByClassName("active");
                            //    console.log(objSel);
                            var arr1=[];
                            for(var i=0;i<objSel.length;i++){
                                // console.log(1);
                                // console.log($(objSel[k]));
                                    var str=$(objSel[i]).data("pid");
                                    // console.log(str);
                                    arr1.push(str);
                                    // console.log(arr1)
                                }
                                var t = '-';
                                arr1.map((r)=>{
                                    t += r + '-';
                                })
                                var tid = t;

                                // console.log(tid);
                                // console.log($_this.goods_ps);
                                for(let j in $_this.goods_ps){
                                    if(j == tid){
                                        // console.log(j);
                                        // console.log($this.goods_ps[j]);
                                        $_this.goods_ps_cont = $_this.goods_ps[j]
                                    }
                                }
                                if($_this.goods_ps_cont.sku_id){
                                  $_this.goodsSkuId=  $_this.goods_ps_cont.sku_id;
                                }
                        })

                    })
                } else {
                    api.alert({ msg: JSON.stringify(err) });
                }
            })
          }
          //alert(JSON.stringify(api.pageParam.data.exchangeOkId))
        },
        methods: {
          openShop: function(name, id) {
            api.openWin({
              name: 'shop_inner',
              url: '../two_frame/two_frame_header.html',
              pageParam: {
                  type: 'shop_inner',
                  name: name,
                  id: id
              }
            })
          },
          numAdd:function(){
            $_this=this;
            $_this.num++;
            // $_this.goods_ps_cont.price=$_this.goods_ps_cont.price*$_this.num;
          },
          numDel:function(){
            $_this=this;
            $_this.num--;
            // $_this.goods_ps_cont.price=$_this.goods_ps_cont.price*$_this.num;
          },
          goSubmit:function(type, sku){
            $_this=this;
            if(type==1){
              api.ajax({
                url: window.Url.Freecart_joinCart,
                method: 'post',
                data: {
                  values: {
                    goodsId: api.pageParam.id,
                    token: $api.getStorage('token'),
                    sku_id:$_this.goodsSkuId,
                    exchange_id:$_this.exchangeids,
                    exchange_sku_id:$_this.exchangegoodsSkuId,
                    num:$_this.num
                  }
                }
              }, function(ret, err) {
                  if (ret) {
                      api.toast({ msg: ret.info,duration: 2000,location:'middle' });
                      var jsfun = 'window.location.reload();';
                      api.execScript({
                          name: 'root',
                          frameName: 'carlist',
                          script: jsfun
                      });
                      api.closeFrame({
                          name: 'purchase'
                      });
                      $_this.$nextTick(function () {

                      })
                  } else {
                      api.alert({ msg: JSON.stringify(err) });
                  }
              })
            }else if(type==2){
                api.openWin({
                  name:"order",
                  url:'../three_frame/order.html',
                  pageParam: {
                      under_type: 1,
                      goodsId: api.pageParam.id,
                      num: $_this.num,
                      sku_id: $_this.goodsSkuId,
                      exchange_id: api.pageParam.data,
                      exchange_sku_id: $_this.exchangegoodsSkuId,
                  }
                })
            }else if(type==3){
              api.toast({ msg: '赠品添加成功',duration: 2000,location:'middle' });
              //  console.log(JSON.stringify($_this.goods_ps_cont));
               api.sendEvent({
                   name: 'exchange_list',
                   extra: {
                       exchangeList:$_this.goods_ps_cont,
                       exchangeListId:$_this.exchangeids,
                       exchangeListSkuId:$_this.goods_ps_cont.sku_id,
                       exchangeNames:$_this.exchangegoodsNames,
                       flag:false,
                       num:$_this.num,

                   }
               });

                api.execScript({
                    frameName: 'exchange',
                    script: 'window.location.reload()'
                });
              api.closeWin({
                  name: 'exchange'
              });
              api.closeWin({});

            }else if(type==4){
               api.sendEvent({
                   name: 'changeCarlistItem',
                   extra: {
                       sku: sku,
                       index: api.pageParam.index,
                       i: api.pageParam.i,
                       num: $_this.num
                   }
               });
              //
              //
              // api.closeFrame({
              //     name: 'exchange'
              // });
              api.closeFrame();

            }
          }


        },
        mounted: function () {
          api.hideProgress();

        }
      })
    }
</script>

</html>
